<!--
    @作者：814878176@qq.com
    @时间：2020-03-30
    @描述：首页
	@使用："path": "pages/tabBar/home/home"
 -->
<template>
	<view class="home-wrappers">
		<image @click="goDetailPage()" class="uni-image" mode="widthFix" :src="homeData.file_url" />
		<!-- 加载进度条 -->
		<view @click="goDetailPage()" class="bar-wrapper">
			<view class="inwrapper" :style="'width:' + barWidth + '%'"></view>
			<text class="num">{{Math.round(barWidth) + '%'}}</text>
		</view>
		<view v-if="!showPage" class="bank-wrapper">
			<!-- <view class="bar-wrapper">
				<view class="inwrapper" :style="'width:' + barWidth + '%'"></view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPage: false,
				barWidth: 10,
				barTimeIndex: 0,
				homeData: {}
			}
		},
		watch: {
			showPage() {
				/**
				 * 监听显示页面后显示进度条、加载其他接口数据
				 */
				if(this.showPage) {
					// 进度条动态效果，达到百分百跳转页面
					this.barWidth = 0;
					this.barTimeIndex = setInterval(()=>{
						this.barWidth = this.barWidth + 0.4;
						if(this.barWidth>=100) {
							clearInterval(this.barTimeIndex);
							this.goDetailPage();
						}
					},10)
					
					// 判断是否已经缓存底部导航栏数据
					let barDatas = sessionStorage.getItem( "barDatas" );
					if(!barDatas) {
						this.getBarData();
					}
					
					this.getqrcode();
					this.getMusic();
				}
			}
		},
		onLoad() {
			console.log("home.vue")
			sessionStorage.setItem("isFirstComeIn",true);
			// 判断是否已经缓存首页数据
			let homeData = sessionStorage.getItem( "homeData" );
			if(homeData) {
				this.homeData = JSON.parse( homeData );
				if(this.homeData.file_url) {
					this.getHomeData();
				}else {
					this.showPage = true;
				}
			}else {
				this.getHomeData();
			}
		},
		methods: {
			// 背景音乐
			getMusic() {
				this.$request({
						 method: "GET",
						 url: PATHAPI + '/index.php/text',
						 params: {
							page_no: "music" 
						 },
						 data: {},
						 success: (res) => {
							if(res.data.status == 'success'){
								let music = res.data.data || {};
								music.video_file = music.video_file || {};
								music.pause_img = music.pause_img || {};
								music.play_img = music.play_img || {};
								music.pause_img = music.pause_img.file_url || "/static/music/music_btn_stop.png";
								music.play_img = music.play_img.file_url || "/static/music/music_btn.png";
								music.video_file = music.video_file.file_url || "/static/music/bgm.mp3";
								sessionStorage.setItem( "music",JSON.stringify( music ) );
							}
						 }
				});
			},
			// 页面路由跳转
			goDetailPage() {
				uni.navigateTo({
					url: "/pages/home/homeNav"
				});
			},
			/**
			 * 公共图片接口
			 */
			getqrcode() {
				this.$request({
						 method: "GET",
						 url: PATHAPI + '/index.php/text',
						 params: {
							page_no: "qrcode" 
						 },
						 data: {},
						 success: (res) => {
							if(res.data.status == 'success'){
								let qrcode = res.data.data || {};
								qrcode.guide_img = qrcode.guide_img.file_url || "/static/common/code_bg.png";
								qrcode.wechat_img = qrcode.wechat_img.file_url || "/static/common/code.png";
								sessionStorage.setItem( "qrcode",JSON.stringify( res.data.data || {} ) );
							}
						 }
				});
			},
			/**
			 * 首页图片数据
			 */
			getHomeData() {
				this.$request({
						 method: "GET",
						 url: PATHAPI + '/index.php/text',
						 params: {
							page_no: "home" 
						 },
						 data: {},
						 success: (res) => {
							if(res.data.status == 'success'){
								this.homeData = res.data.data || {};
								this.homeData = this.homeData.background_img || {};
								this.showPage = true;  // 隐藏白页
								sessionStorage.setItem( "homeData",JSON.stringify( this.homeData || {} ) );
							}
						 }
				});
			},
			/**
			 * 底部导航栏接口数据
			 * http://a.yuncjs.cn/index.php/getText?page_no=global
			 */
			getBarData() {
				this.$request({
						 method: "GET",
						 url: PATHAPI + '/index.php/text',
						 params: {
							page_no: "global" 
						 },
						 data: {},
						 success: (res) => {
							 console.log(res.data);
							 if(res.data.status == 'success'){
								 // 缓存数据
								 sessionStorage.setItem( "barDatas",JSON.stringify( res.data.data || {} ) );
							 }
						 }
				});
			},
			
		}
	}
</script>

<style lang="stylus" scoped>
	@import "../../common/css/var.styl"   
	.home-wrappers {
		position: relative;
		height: 100%;
		.uni-image {
			height: 100% !important;
			vertical-align: middle;   /*去掉底部的白边*/
		}
		.router-btn {
			position: absolute;
			z-index: 99;
			top: 60%;
			SetCenterX();
			color: #333;
			font-size: 64upx;
			font-weight: bold;
		}
		.bar-wrapper {
			width: 60%;
			top: 78%;
			SetCenterX();
		}
	}
	
</style>
